<template>
	<view class="list">
		<draft v-for="(item,index) in list" :key="item.id" :index="index" :item="item" @setShow="setShow"></draft>
		<v-loadmore v-if="list.length > 0" :status="loadStatus" @click="getMyDraftPageData"></v-loadmore>
		<v-nodata v-else-if="page > 1"></v-nodata>
		
		<view style='height:120rpx;'></view>	
		<home></home>
	</view>
</template>

<script>
	let that;
	import colors from '@/mixins/color.js';
	import home from '@/components/home';
	import draft from "@/pages/index/mydiy/components/draft";
	export default {
		components: {
			home,draft
		},
		mixins: [colors],
		data(){
			return {
				list: [],
				loadStatus: "more",
				page: 1,
				total: 0
			}
		},
		onLoad(){
			that = this;
			that.getMyDraftPageData();
		},
		methods:{
			toDetail(id){
				console.log(id);
			},
			setShow(index){
				let item = that.list[index];
				that.$http.post("v1/setShow/"+item.id).then(res=>{
					item.is_show = res.data.is_show;
					that.list[index] = item;
				})
			},
			reset(){
				that.loadStatus = "more";
				that.page = 1;
				that.total = 0;
			},
			getMyDraftPageData(reset){
				if (that.loadStatus != "more") return;
				that.loadStatus = "loading";
				that.$http.post("v1/getMyDraftPageData?page=" + that.page).then(res=>{
					let data = res.data.pageData;
					if(that.page == 1) that.total = data.total;
					if(reset == "reset") that.list = [];
					that.list.push(...data.data);
					
					if(that.list.length >= that.total) that.loadStatus = "nomore";
					else that.loadStatus = "more";
					
					that.page++;
				}).catch(err => {
					that.loadStatus = "more";
				});
			}
		},
		onReachBottom() {
			that.getMyDraftPageData();
		},
		onPullDownRefresh(){
			that.reset();
			that.getMyDraftPageData("reset");
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			}, 500);
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-top: 20rpx;
	}

</style>